<template>
  <div class="">
    <heads></heads>
    <main>
      <el-form :model="business" :rules="rules" ref="business" label-width="100px" class="demo-ruleForm">
        <el-form-item label="店铺名称" prop="name">
          <el-input v-model="business.name"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <template>
            <el-select :multiple-limit="1" v-model="business.address" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
              <el-option v-for="(item, index) in options" :key="index" :label="item.cityname" :value="item.cityname"> </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="所属账号" prop="userId">
          <template>
            <el-select :multiple-limit="1" v-model="business.userId" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodUser" :loading="userLoading">
              <el-option v-for="(item, index) in optionsUser" :key="index" :label="item.username" :value="item.id"> </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="business.phone"></el-input>
        </el-form-item>
        <el-form-item label="店铺简介" prop="textInfo">
          <el-input v-model="business.textInfo"></el-input>
        </el-form-item>
        <el-form-item label="店铺标语" prop="title">
          <el-input v-model="business.title"></el-input>
        </el-form-item>
        <el-form-item label="店铺分类" prop="class">
          <el-cascader :options="optionsClass" @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="店铺特点" prop="resource"> <el-switch v-model="value1" inactive-text="速度特快"> </el-switch><el-switch v-model="value2" inactive-text="美味佳肴"> </el-switch><el-switch v-model="value3" inactive-text="一模一样"> </el-switch> </el-form-item>
        <el-form-item label="配送费" prop="togoMoney">
          <template>
            <el-input-number v-model="business.togoMoney" :min="1" :max="25" label="描述文字"></el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="起送价" prop="leadyMoney">
          <template>
            <el-input-number v-model="business.leadyMoney" :min="1" :max="25" label="描述文字"></el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="营业时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="开始时间" v-model="business.date1" style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="结束时间" v-model="business.date2" style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="上传店铺头像" prop="busImg">
          <el-upload action="http://127.0.0.1:8000/admin/Upload/addFile" list-type="picture-card" ref="perUpload" :limit="1" :auto-upload="true" :on-success="uploadBusImg">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-delete" @click="handleRemove">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传营业执照" prop="licenseImg">
          <el-upload action="http://127.0.0.1:8000/admin/Upload/addFile" list-type="picture-card" ref="perUploads" :limit="1" :auto-upload="true" :on-success="uploadLicenseImg">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-delete" @click="handleRemoves">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传餐饮服务许可证" prop="cateringImg">
          <el-upload action="http://127.0.0.1:8000/admin/Upload/addFile" list-type="picture-card" ref="perUploadss" :limit="1" :auto-upload="true" :on-success="uploadCateringImg">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-delete" @click="handleRemovess">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
          <el-select v-model="ActivityId" placeholder="请选择" v-on:change="dialogFormVisible = true">
            <el-option v-for="item in optionsActivity" :key="item.id" :label="item.activityName" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <template>
            <el-table :data="tableData" stripe style="width: 100%; border: 1px solid #efefef">
              <el-table-column prop="title" label="活动标题" width="180"> </el-table-column>
              <el-table-column prop="activiName" label="活动名称" width="180"> </el-table-column>
              <el-table-column prop="activeText" label="活动详情"> </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="danger" v-on:click="deleteActivi(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addData">立即创建</el-button>
          <el-button @click="resetForm('business')">重置</el-button>
        </el-form-item>
      </el-form>

      <el-dialog title="添加活动" :visible.sync="dialogFormVisible">
        <el-form :model="activi">
          <el-form-item label="活动详情" :label-width="formLabelWidth">
            <el-input v-model="activi.activiText" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelactivi">取 消</el-button>
          <el-button type="primary" @click="sureAddactivi">确 定</el-button>
        </div>
      </el-dialog>
    </main>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import heads from "@/components/adminHead.vue";

import { selectAddress, selectBusineClass, deleteFile, selectActivity, addBusActivi, selectLikeUser, addBusinessc } from "@/api/getPostApi";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    heads,
  },
  data() {
    //这里存放数据
    return {
      userLoading: false,
      ActivityId: "",
      busImgFlag: false,
      optionsActivity: [],
      value1: true,
      value2: true,
      value3: true,
      optionsClass: [],
      options: [],
      loading: false,
      optionsUser: [],
      business: {
        togoMoney: 5,
        leadyMoney: 20,
        name: "",
        address: "",
        phone: "",
        textInfo: "",
        title: "",
        class: "",
        date1: "",
        date2: "",
        resource: "o",
        desc: "",
        licenseImg: "",
        cateringImg: "",
        busImg: "",
        userId: "",
        sonClassId: "",
      },
      activi: {
        activiText: "",
      },
      rules: {
        name: [{ required: true, message: "请输入商店名称", trigger: "blur" }],
        address: [{ required: true, message: "请输入收获地址", trigger: "change" }],
        userId: [{ required: true, message: "请输入账号信息", trigger: "change" }],
        date1: [{ type: "date", required: true, message: "请开始时间", trigger: "change" }],
        date2: [{ type: "date", required: true, message: "请结束时间", trigger: "change" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        textInfo: [{ required: true, message: "请输入店铺简介", trigger: "blur" }],
        title: [{ required: true, message: "请输入店铺标语", trigger: "blur" }],
        class: [{ required: true, message: "请选择店铺类别", trigger: "blur" }],
        togoMoney: [{ required: true, message: "请选择配送金额", trigger: "change" }],
        leadyMoney: [{ required: true, message: "请选择起送金额", trigger: "change" }],
        licenseImg: [{ required: true, message: "请传送营业照片", trigger: "change" }],
        cateringImg: [{ required: true, message: "请传入许可证图片", trigger: "change" }],
        busImg: [{ required: true, message: "请输入商店头像", trigger: "change" }],
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
      tableData: [
        {
          id: 1,
          title: "减",
          activiName: "满减优惠",
          activeText: "满30,立马减50",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    remoteMethod(val) {
      this.loading = true;
      selectAddress(val).then((response) => {
        this.loading = false;
        this.options = response.data;
      });
    },
    handleChange(val) {
      const [vals, valsT] = val;
      this.business.class = vals;
      this.business.sonClassId = valsT;
    },
    handleRemove() {
      this.$refs.perUpload.uploadFiles = [];
      deleteFile(this.business.busImg);
    },
    handleRemoves() {
      this.$refs.perUploads.uploadFiles = [];
      deleteFile(this.business.licenseImg);
    },
    handleRemovess() {
      this.$refs.perUploadss.uploadFiles = [];
      deleteFile(this.business.cateringImg);
    },
    uploadBusImg(val) {
      this.business.busImg = val;
    },
    uploadLicenseImg(val) {
      this.business.licenseImg = val;
    },
    uploadCateringImg(val) {
      this.business.cateringImg = val;
    },
    sureAddactivi() {
      if (this.ActivityId === 1) {
        const Obj = {
          id: 1,
          title: "减",
          activiName: "满减优惠",
          activeText: this.activi.activiText,
        };
        this.tableData.push(Obj);
      }
      if (this.ActivityId === 2) {
        const Obj = {
          id: 2,
          title: "新",
          activiName: "新用户立减",
          activeText: this.activi.activiText,
        };
        this.tableData.push(Obj);
      }
      if (this.ActivityId === 3) {
        const Obj = {
          id: 3,
          title: "领",
          activiName: "进店领卷",
          activeText: this.activi.activiText,
        };
        this.tableData.push(Obj);
      }
      if (this.ActivityId === 4) {
        const Obj = {
          id: 4,
          title: "特",
          activiName: "优惠大酬宾",
          activeText: this.activi.activiText,
        };
        this.tableData.push(Obj);
      }
      this.activi.activiText = "";
      this.dialogFormVisible = false;
    },
    deleteActivi(id) {
      this.tableData = this.tableData.filter((val) => val.id !== id);
    },
    addData() {
      let strs = "";
      if (this.value1) {
        strs += "速度特快";
      }

      if (this.value2) {
        strs += "美味佳肴";
      }

      if (this.value3) {
        strs += "一模一样";
      }

      if (!(this.business.name && this.business.address[0] && this.business.phone && this.business.textInfo && this.business.title && strs && this.business.togoMoney && this.business.leadyMoney && this.business.date1 && this.business.date2 && this.business.busImg && this.business.licenseImg && this.business.cateringImg && this.business.userId[0] && this.business.class && this.tableData)) {
        return false;
      }
      addBusinessc(this.business.name, this.business.address[0], this.business.phone, this.business.textInfo, this.business.title, strs, this.business.togoMoney, this.business.leadyMoney, this.business.date1, this.business.date2, this.business.busImg, this.business.licenseImg, this.business.cateringImg, this.business.userId[0], this.business.class, this.tableData, this.business.sonClassId).then((response) => {
        if (response.data.status === 200) {
          this.$message({
            message: "恭喜你，成功添加",
            type: "success",
          });
          this.$refs.perUpload.uploadFiles = [];
          this.$refs.perUploads.uploadFiles = [];
          this.$refs.perUploadss.uploadFiles = [];
          this.business.busImg = "";
          this.business.licenseImg = "";
          this.business.cateringImg = "";
          this.$refs.business.resetFields();
        } else {
          this.$message.error("错了哦，添加失败！！");
        }
      });
      return true;
    },
    cancelactivi() {
      this.$message("取消添加活动");
      this.dialogFormVisible = false;
    },
    remoteMethodUser(val) {
      this.userLoading = true;
      selectLikeUser(val).then((response) => {
        this.userLoading = false;
        this.optionsUser = response.data;
      });
    },
    resetForm(formName) {
      this.tableData = [
        {
          id: 1,
          title: "减",
          activiName: "满减优惠",
          activeText: "满30,立马减50",
        },
      ];
      this.deleteAllFiles();
      this.$refs[formName].resetFields();
    },
    deleteAllFiles() {
      if (this.business.busImg) {
        this.handleRemove();
      }

      if (this.business.licenseImg) {
        this.handleRemoves();
      }

      if (this.business.cateringImg) {
        this.handleRemovess();
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    selectBusineClass().then((response) => {
      console.log(response.data);
      this.optionsClass = response.data;
    });

    selectActivity().then((response) => {
      this.optionsActivity = response.data;
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    this.deleteAllFiles();
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
main {
  margin: 30px auto;
  width: 50%;
}
</style>
